import React, { Component } from 'react';

import PropTypes from 'prop-types' // 数据传值校验

class XiaojjItem extends Component {

    constructor (props){
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }

    // componentWillReceiveProps () {
    //     console.log('child --- componentWillReceiveProps')
    // }

    // shouldComponentUpdate (nextProps, nextState) {
    //     console.log(nextProps.list)
    //     console.log(nextState)
    //     console.log(this.props.list)
    //     if (nextProps.list !== this.props.list) {
    //         return true
    //     } else {
    //         return false           
    //     }
    // }
   
    render() { 
        console.log('item component -------')
        return ( 
            this.props.list.map((item, index) => 
                <li key={index} onClick={this.handleClick.bind(this, index)}>{item} + {index} + {this.props.username}</li>

                // <li key={index} onClick={this.handleClick(index)}>{item} + {index}</li>
                
                )

            // <li>{this.props.list}</li>
         );
    }

    componentDidMount() {
        // console.log(this.props.list)
    }

    // 删除  调用父组件方法
    handleClick (index) {
        
        this.props.delItem(index)
    }
}

/**
 * 数据校验
 */
XiaojjItem.propTypes = {
    username: PropTypes.string,
    list: PropTypes.array,
    delItem: PropTypes.func
}
 
export default XiaojjItem;